<template>
	<view class="bg-gray">
		<cu-custom :isBack="true">
			<block #content>
				{{deviceName != null ? deviceName : ''}}
			</block>
		</cu-custom>
		<view class="padding bg-white common-bar">
			<view class="flex justify-around align-center">
				<picker mode="date" :value="startDate" :end="formatDate(initEndTimestamp)" @change='startDateChange'>
					<view class=" text-df" style="width: 100%;">{{startDate}}</view>
				</picker>
				<view class="text-df">{{$t('to')}}</view>
				<picker mode="date" :end="formatDate(initEndTimestamp)" @change='endDateChange'>
					<view class=" text-df">{{endDate}}</view>
				</picker>
			</view>
		</view>
		<view class="common-bar-height"></view>
		<!-- <view style="border-radius: 15rpx;margin:30rpx;">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text> 文章类卡片
				</view>
				<view class="action">

				</view>
			</view>
			<view class="cu-card article no-card">
				<view class="cu-item shadow">
					<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
					<view class="content">
						<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
							<view>
								<view class="cu-tag bg-red light sm round">正义天使</view>
								<view class="cu-tag bg-green light sm round">史诗</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getEventDataList">
			<view v-for="(arrItem,arrIndex) in deviceWarnlist" :key="arrIndex" :style="(arrIndex == 0 ? style : '')">
				<view v-for="(item,index) in arrItem" :key="index" @tap="gotoDevice(item)">
					<view class="bg-white light common-box text-sm margin padding">
						<view class="flex justify-between padding-bottom-sm"
							style="border-bottom:1px solid rgba(0, 0, 0, 0.1);">
							<view class="text-content">
								<text class="margin-right-sm">{{$t('status')}}:</text>
								<text>{{item.remark}}</text>
							</view>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">{{$t('device')}}:</text>
							<text class="text-gray">{{item.deviceName}}({{item.deviceCore}})</text>
						</view>
						<view class="margin-top-sm text-df">
							<text class="margin-right-xs ">{{$t('content')}}:</text>
							<text class="text-yellow">{{item.alarmContent}}</text>
						</view>
						<view class="flex justify-between margin-top-sm">
							<view>
								<text>{{item.createTime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<view class="cu-modal" :class="statusModalVisible?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="statusChange">
					<view class="cu-list menu text-left">
						<view class="cu-item">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{$t('untreated')}}</view>
								<radio class="round" :class="deviceWarn.status === 0 ? 'checked':''"
									:checked="deviceWarn.status=== 0 ? true : false" :value="0"></radio>
							</label>
						</view>
						<view class="cu-item">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{$t('misinformation')}}</view>
								<radio class="round" :class="deviceWarn.status === 1 ? 'checked':''"
									:checked="deviceWarn.status === 1 ? true : false" :value="1"></radio>
							</label>
						</view>
						<view class="cu-item">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{$t('processed')}}</view>
								<radio class="round" :class="deviceWarn.status === 2 ? 'checked':''"
									:checked="deviceWarn.status === 2 ? true : false" :value="2"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import {
		formatDateTime,
		formatDate
	} from '@/util/formatTime'
	import * as storage from '@/util/storage'
	import * as dataApi from '@/api/dmIot/dataApi.ts'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: '20%'
					},
				},
				style: '',
				statusModalVisible: false,
				startDate: '',
				endDate: '',
				startTimestamp: '',
				endTimestamp: '',
				initEndTimestamp: '',
				initEndDate: '',
				deviceWarnlist: [],
				deviceWarn: {},
				deviceName: '',
				deviceCore: null,
				currentPage: 1,
				pageSize: 10,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.initOption = option
			this.startDate = this.$t('all')
			this.endDate = this.$t('all')
		},
		onShow() {
			this.init()
		},
		methods: {
			formatDate(time) {
				return formatDate(time, this.$t('unKnow'))
			},
			formatDateTime(time) {
				return formatDateTime(time, this.$t('unKnow'))
			},
			formatDeviceWarnStatus(status) {
				return formatDeviceWarnStatus(this, status)
			},
			gotoDevice(item) {
				const component = storage.getDeviceNavigationComponent() || 'deviceInfo'
				uni.navigateTo({
					url: `/pages/deviceNavigation/deviceNavigation?id=${item.deviceId}&code=${item.deviceCode}&name=${item.deviceName}&component=${component}`
				})
			},
			hideModal() {
				this.statusModalVisible = false
			},
			statusChange(e) {
				iotDeviceWarnApi.updateDeviceWarn({
					warnId: this.deviceWarn.warnId,
					status: e.detail.value,
				}).then(res => {
					const {
						data
					} = res
					this.currentPage = 1
					this.deviceWarnlist = []
					this.getDeviceWarn()
					this.statusModalVisible = false
				})
			},
			downCallback() {
				this.currentPage = 1
				this.deviceWarnlist = []
				this.mescroll.resetUpScroll()
			},
			init() {
				this.deviceId = this.initOption.deviceId || null
				this.initDate()
			},
			initDate() {
				let time = new Date()
				this.startTimestamp = Math.round(time.getTime() / 1000 - 7 * 24 * 60 * 60).toString()
				this.endTimestamp = Math.round(time.getTime() / 1000 + 1 * 10).toString()
				this.startDate = formatDate(this.startTimestamp)
				this.endDate = formatDate(this.endTimestamp)
				this.initEndTimestamp = this.endTimestamp
				this.getEventDataList()
			},
			getEventDataList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let deviceId = this.deviceId
				let startTimestamp = this.startTimestamp
				let endTimestamp = this.endTimestamp
				let params = {
					startTime: formatDateTime(startTimestamp),
					endTime: formatDateTime(endTimestamp),
					pageNum: currentPage,
					pageSize
				}
				if (deviceId) {
					params['deviceId'] = deviceId
				}
				dataApi.getEventDataList(params).then((res) => {
					const {
						rows,
						total,
						success
					} = res
					if (success) {
						this.mescroll.endByPage(rows.length, total)
						const index = currentPage - 1
						this.$set(this.deviceWarnlist, index, rows)
						this.currentPage = currentPage + 1
					}
				})
			},
			startDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000).toString();
				const endTimestamp = this.endTimestamp
				if (endTimestamp < timestamp || endTimestamp == timestamp) {
					showToast(this.$t('lessEndDateTip'), 'none', 1000, false) //请选择小于结束日期
				} else {
					this.startTimestamp = timestamp
					this.startDate = e.detail.value
					this.currentPage = 1
					this.deviceWarnlist = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			endDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/');
				const timestamp = (new Date(date).getTime() / 1000 + 1 * 24 * 60 * 60).toString();
				const startTimestamp = this.startTimestamp
				if (startTimestamp > timestamp || startTimestamp == timestamp) {
					showToast(this.$t('greaterStartDateTip'), 'none', 1000, false) //请选择大于开始日期
				} else {
					this.endTimestamp = timestamp
					this.endDate = e.detail.value
					this.currentPage = 1
					this.deviceWarnlist = []
					this.mescroll.scrollTo(0, 300)
					this.mescroll.resetUpScroll()
				}
			},
			warnTap(item) {
				this.deviceWarn = item
				this.statusModalVisible = true
			},
		},
		onShareAppMessage(res) {
			return {
				title: `中泰能`,
				path: `/pages/login/login`,
				success: (res) => {
					// console.log(res)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
